!
<template>
	<view>
		<view ref="pdfH5Ref" id="pdfDomBox" v-show="pdfFlag">
		</view>
	</view>
</template>

<script>
	import Pdfh5 from "pdfh5";
	export default {
		components: {},
		props: {
			flag: {
				type: Boolean,
				default: true
			},
			pdfUrl: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				pdfFlag: false,
				pdfh5: null,
				pdfCodeArray: '',
				logo: {
					src: "https://cdn.fxnws.com/beasun/wechatApp/openApp/static/logo.png",
					x: 10,
					y: 10,
					width: 40,
					height: 40
				},
				background: {
					color: "#fff",
					image: "url('https://cdn.fxnws.com/beasun/wechatApp/openApp/static/mask.png')",
					// repeat: "no-repeat",
					repeat: "repeat",
					position: "left top",
					size: "100vw 100vh"
				}
			}
		},
		watch: {},
		created() {},
		unmounted() {
			this.pdfh5.destroy()
			this.pdfh5 = null
			uni.hideLoading();
		},
		mounted() {
			uni.showLoading({
				title: 'PDF加载中'
			});
			this.loadingPdf();
			console.log('测试123', this.pdfh5, this.flag)
		},
		methods: {
			loadingPdf() {
				this.pdfh5 = new Pdfh5('#pdfDomBox', { // 此处使用ref获取避免不刷新
					renderType: 'canvas', // canvas||svg，默认canvas
					pdfurl: this.pdfUrl || 'https://cdn.fxnws.com/beasun/git.pdf',
					scale: 5, //比例越大，pdf越清晰
					logo: this.flag ? this.logo : {},
					background: this.flag ? this.background : {}
				});
				this.pdfh5.on("ready", function() {
					// console.log("总页数：" + this.totalNum)
					// uni.showToast({
					// 	title: '总页数：' + this.totalNum,
					// 	icon: 'none',
					// 	duration: 1000
					// });
				})
				this.pdfh5.on("render", function(currentNum, time, currentPageDom) {
					uni.showToast({
						title: `加载：${currentNum}页，总耗时：${(time / 1000).toFixed(2)}s`,
						icon: 'none',
						duration: 1000
					});
				})
				this.pdfh5.on("success", function(msg, time) {
					uni.showToast({
						title: '加载完成',
						icon: 'none',
						duration: 1000
					});
				})
				//监听完成事件
				this.pdfh5.on('complete', (status, msg, time) => {
					this.$nextTick(() => {
						this.pdfFlag = true
						uni.hideLoading();
						console.log('pdfFlag', this.pdfFlag)
						//禁止手势缩放
						// this.pdfh5.zoomEnable(false)
						// 下载pdf
						// this.pdfh5.download()
						// 获取 pdfH5Ref 组件的引用 为解决scale值大时，canvas展示过大问题
						const pdfH5Ref = this.$refs.pdfH5Ref

						// 查找具有 viewerContainer 类名的元素
						const viewerContainer = pdfH5Ref.$el.querySelector('.viewerContainer')

						if (viewerContainer) {
							// 查找具有 pinch-zoom-container 类名的元素
							const pinchZoomContainer = viewerContainer.querySelector(
								'.pinch-zoom-container'
							)

							if (pinchZoomContainer) {
								pinchZoomContainer.style.height = 'auto' // 替换为所需的高度

								// 查找具有 pageContainer 类名的元素
								const pageContainers =
									pinchZoomContainer.querySelectorAll('.pageContainer')
								// 设置 pinch-zoom-container 元素的高度
								if (pageContainers) {
									// 循环处理每个 pageContainer
									pageContainers.forEach((pageContainer) => {
										pageContainer.style.width = '100%'
										pageContainer.style.height = '100%'
										pageContainer.style.minWidth = '100%'
										pageContainer.style.maxWidth = '100%'
										pageContainer.style.minHeight = '100%'
										pageContainer.style.maxHeight = '100%'
										// 查找当前 pageContainer 下的所有 img 元素
										const imgElements = pageContainer.querySelectorAll('img')

										if (imgElements) {
											// 设置每个 img 元素的宽度
											imgElements.forEach((imgElement) => {
												imgElement.style.width = '100%' // 替换为所需的宽度
												imgElement.style.height = '100%' // 替换为所需的宽度
											})
										}
									})
								}
							}
						}
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "pdfh5/css/pdfh5.css";
</style>